<template>
	<custom-page-select-layout>
		<template #header>
			<view class="search-wrapper" slot="header">
				<fui-search-bar paddingTb="0" searchText="" paddingLr="0" radius="16" height="80"
					inputBackground="#F3F3F3" isLeft :cancel="false" @clear="onClear"
					@input="onChangeKeywords"></fui-search-bar>

			</view>

		</template>
		<template #body>

			<custom-common-select :multiple="multiple" :view-list-data="teamViewListData" @change="changeData"
				:checkedValue="checkedValue"></custom-common-select>

		</template>
		<template #footer>
			<view class="footer">

				<fui-row class="button-wrapper" :gutter="16">
					<fui-col :span="6">
						<fui-button background="#F2F3FF" color="#0052D9" @click="onCancel">
							取消
						</fui-button>
					</fui-col>
					<fui-col :span="18">
						<fui-button @click="onConfirm">
							确认
						</fui-button>
					</fui-col>
				</fui-row>
			</view>
		</template>
	</custom-page-select-layout>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'pinia'
	import {
		defineComponent
	} from 'vue'
	import _ from 'lodash'

	import {
		useSyStemStore
	} from '../../store/modules/system.js'

	import {
		useTeamStore
	} from '../../store/modules/team.js'

	export default defineComponent({
		name: 'SelectPageTeam',
		computed: {
			...mapState(useSyStemStore, ['teamList']),
			...mapState(useTeamStore, ['checkedValue']),
			...mapGetters(useTeamStore, ['teamViewListData']),

		},
		data() {
			return {

				multiple: false,
				storeKey: '',
				backToPath: null
			}
		},

		onLoad(options) {

			const is = {
				'false': false,
				'true': true
			}
			const {
				multiple,
				backToPath,
				storeKey
			} = options
			console.log(options, 'options');
			this.backToPath = backToPath
			this.multiple = is[options.multiple]
			this.setTeamStoreKey(storeKey)

		},
		methods: {
			...mapActions(useTeamStore, ['setTeamStoreKey', 'onChangeKeywords', 'onClear', 'changeData']),


			onCancel() {
				uni.redirectTo({
					url: this.backToPath
				})
			},

			onConfirm() {
				uni.redirectTo({
					url: this.backToPath
				})
			},



			// changeRadio(val, item) {
			// 	console.log(val, item, 'val, item');
			// 	this.currentValuePath = item._path
			// 	this.setCheckValue_Radio(val.value)
			// 	this.setStoreKeyValue(val.value, item._name, this.storeKey)
			// },

			// onNextIcon(item) {
			// 	this.setViewListData(item.children)
			// 	this.setPathData({
			// 		nodeName: item._name,
			// 		value: item._value
			// 	})
			// }
		}
	})
</script>

<style lang="scss" scoped>
	.cell {
		// width: 654rpx;
		// height: 112rpx;
		background-color: #fff;
		// box-shadow: 32rpx -1rpx 0 #f1f1f1;

		&-left {
			padding: 32rpx 0 32rpx 16rpx !important;

			&:active {
				background-color: #f1f1f1;
			}

			.text {
				margin-left: 16rpx;
			}
		}

		&-right {
			padding: 32rpx 0;

			&:active {
				background-color: #f2f2f2;
			}
		}

	}

	.border {
		border-bottom: 2rpx solid #f1f1f1;
	}
</style>